
import React, {Component} from 'react'
import PropsRoute from "../News/index";
import {NavLink, Navigate, Route, Routes} from "react-router-dom";

export default class MultilevelRoute extends Component {

    render() {
        return (
            <div>
                <div>
                    <ul>
                        {/* 传参方式-params */}
                        <li><NavLink to="/multilevelRoute/News/1/11">prop-params</NavLink></li>
                        {/* 传参方式-search */}
                        {/* <li><NavLink to="/multilevelRoute/searchTest?id=2&code=22">prop-search</NavLink></li> */}
                        {/*
                            react-router-dom v5 传参写法:
                            <NavLink to={{pathname:'/multilevelRoute/stateTest',state:{id:'3',code:33}}}>prop-               state</NavLink>
                        */}
                        {/* 传参方式-state */}
                        {/* <li><NavLink to="/multilevelRoute/stateTest" state={{id:'3',code:33}}>prop-state</NavLink></li> */}
                    </ul>
                </div>
                <div>
                    <Routes>
                        {/*
                            react-router-dom v5写法 path = "全路径":
                            <Route path="/multilevelRoute/search" element={<PropsRoute></PropsRoute>}></Route>
                        */}
                        {/* 
                            react-router-dom v6写法
                         */}
                        {/* <Route path="/paramsTest/:id/:code" element={<PropsRoute>params</PropsRoute>}></Route>
                        <Route path="/searchTest" element={<PropsRoute>search</PropsRoute>}></Route> */}
                        <Route path="News" element={<PropsRoute></PropsRoute>}></Route>
                        <Route path="/*" element={<Navigate to="/home/News" />}></Route>
                    </Routes>
                </div>
            </div>
        )
    }
}
